<template>
	<view class="head">
		<view class="img" @click="back">
			<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/back-arrow.png" mode=""></image>
		</view>
		<view class="message">
			<text>我的任务</text>
		</view>
	</view>
	<view class="body">
		<view class="container">
			<view class="conatenm">
				<view class="input">
					<input type="text" placeholder="搜索任务名称"/>
				</view>
         <view class="search">
    	<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/search.png" mode=""></image>
        </view>
		
		<view class="cartgory">
			<view 
			  v-for="(item, index) in data" 
			  :key="index"
			  :class="{ active: currindex === index, one: currindex !== index }" 
			  @click="change(index)"
			>
			  {{ item.Text }}
			</view>
		</view>
	
			</view>
			
			<scroll-view scroll-y="true" class="scroll-container">
				<view class="ds">
					<view class="heads">
						派发人员：李某某
					</view>
					<view class="dead"></view>
				    <view class="lcircle"></view>
					<view class="rcircle"></view>
					<view class="name">
						任务名称：<text>李强</text>
					</view>
					<view class="neirpong">
						任务内容：<text>任务内容</text>
					</view>
					<view class="time">
						任务时间：<text>2025-05-01 至 2025-05-04</text>
					</view>
					<view class="go" @click="MyTaskDetail">
						去完成
					</view>
				</view>
				
				
				
				<view class="sb">
					<view class="heads">
						派发人员：刘强
					</view>
					<view class="dead"></view>
				    <view class="lcircle"></view>
					<view class="rcircle"></view>
					<view class="name">
						任务名称：<text>李强</text>
					</view>
					<view class="neirpong">
						任务内容：<text>任务内容</text>
					</view>
					<view class="time">
						任务时间：<text>2025-05-01 至 2025-05-04</text>
					</view>
					<view class="finish">
						<text>已完成</text>
					</view>
				</view>
			</scroll-view>
			
			
			
			
			
			
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

	function back (){
		uni.navigateBack({
			delta:1
		})
	}
	
	const data = ref([
	  {
	    Text: "全部"
	  },
	  {
	    Text: "待办事项"
	  },
	  {
	    Text: "已完成"
	  }
	])
	var currindex = ref(0)
	function change (index){
		currindex.value = index;
		console.log(index);
	}
	function MyTaskDetail (){
		uni.navigateTo({
			url:"/homePageOther/MyTaskDetail/MyTaskDetail"
		})
	}
</script>

<style lang="scss" scoped>
	.scroll-container {
	  height: calc(100vh - 142rpx - 231rpx); /* 头部高度 + 搜索区域高度 */
	  overflow: auto;
	}
	 .head {
	 	width: 750rpx;
	 	height: 142rpx;
	 	background: #0874FA;
	 	position: relative;
	 	overflow: hidden;
	 }
	 
	 .img {
	 	width: 22rpx;
	 	height: 38rpx;
	 	position: absolute;
	 	top: 75rpx;
	 	left: 40rpx;
	 
	 	image {
	 		width: 22rpx;
	 		height: 38rpx;
	 	}
	 }
	 
	 .message {
	 	width: 220rpx;
	 	height: 34rpx;
	 	font-family: Source Han Sans CN;
	 	font-weight: 500;
	 	font-size: 36rpx;
	 	color: #FFFFFF;
	 	line-height: 34rpx;
	 	position: absolute;
	 	top: 75rpx;
	 	left: 270rpx;
	 
	 	text {
	 		display: inline-block;
	 		width: 220rpx;
	 		height: 34rpx;
	 		text-align: center;
	 		line-height: 34rpx;
	 	}
	 }
	 
	 .body {
	 	width: 100%;
		height:100vh;
		background-color: #f3f5f7;
	 .container{
		 width: 749rpx;
		 height: 231rpx;
		 background-color: #ffffff;
		 .conatenm{
			 width: 749rpx;
			 height: 231rpx;
			 position: relative;
			 .input{
				 width: 690rpx;
				 height: 75rpx;
				 background: #F6F8F9;
				 border-radius: 38rpx;
				 position: absolute;
				 top: 31rpx;
				 left: 29rpx;
				 input{
					 width: 690rpx;
					 height: 75rpx;
					 font-family: Source Han Sans CN;
					 font-weight: 400;
					 font-size: 25rpx;
					 text-indent: 30rpx;
					 color: #ABABBB;
				 }
			 }
			 .search{
				 width: 30rpx;
				 height: 31rpx;
				 position: absolute;
				  right: 70rpx;
				  top: 55rpx;
				 image{
					 width: 30rpx;
					 height: 31rpx;
				 }
			 }
		 }
	 }
	 }  
		 
		.cartgory{
			width: 690rpx;
			height: 75rpx;
			position: absolute;
			bottom: 31rpx;
		   left: 30rpx;
		   display: flex;
		   justify-content: space-between;
		   align-items: center;
		   .one{
			 width: 123rpx;
			 height: 65rpx;
			   font-family: Microsoft YaHei;
			   font-weight: 400;
			   font-size: 28rpx;
			   color: #5F666E;
			   line-height: 65rpx;
			   text-align: center;
			
		   }
		   .active{
			   width: 123rpx;
			   height: 65rpx;
			   font-weight: 400;
			   font-size: 28rpx;
			   color: #5F666E;
			   line-height: 65rpx;
			   background: #DFEDFF;
			   font-weight: bold;
			   font-size: 28rpx;
			   color: #0874FA;
			   text-align: center;
			   border-radius: 32rpx;

		   }
		} 
		.ds{
			width: 690rpx;
			height: 435rpx;
			background:#ffffff;
			border-radius: 14rpx;
			margin:  29rpx auto;
			position: relative;
			.heads{
				width: 250rpx;
				height: 38rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 31rpx;
				color: #333333;
				line-height: 33rpx;
				position: absolute;
				top: 34rpx;
			    left:26rpx ;
			}
			.dead{
				width: 628rpx;
				height: 1rpx;
				border: 1px dashed #E5E5E5;
				position:  absolute;
				top: 94rpx;
				left: 31rpx;
			}
			.lcircle{
				width: 25rpx;
				height: 25rpx;
				background: #F3F5F7;
				border-radius: 50%;
				position: absolute;
				top: 82rpx;
				left: -10rpx;
				
			}
			.rcircle{
				width: 25rpx;
				height: 25rpx;
				background: #F3F5F7;
				border-radius: 50%;
				position: absolute;
				top: 82rpx;
				right:-10rpx;
			}
			.name{
				width: 200rpx;
				height: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				line-height: 26rpx;
				position: absolute;
				top: 134rpx;
				left: 26rpx;
				text{
					color: #333333;
				}
			}
			.neirpong{
				   width: 260rpx;
					height: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					line-height: 26rpx;
					position: absolute;
					top: 197rpx;
					left: 26rpx;
					text{
						color: #333333;
					}
				}
			.time{
				 width: 500rpx;
					height: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					line-height: 26rpx;
					position: absolute;
					top: 260rpx;
					left: 26rpx;
					text{
						color: #333333;
					}
				}
				.go{
					width: 196rpx;
					height: 73rpx;
					background: #0874FA;
					border-radius: 37rpx;
					text-align: center;
					line-height: 73rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 33rpx;
					color: #ffffff;
					position: absolute;
					bottom: 41rpx;
					right: 44rpx;
				}
				.finish{
					width: 104rpx;
					height: 46rpx;
					background: #cee3fe;
					border-radius: 7rpx;
					// opacity: 0.2;
					justify-content: center;
					display: flex;
					align-items: center;
					position: absolute;
					top: 125rpx;
					right:45rpx;
					text{
						display: inline-block;
						width: 100rpx;
						height: 25rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 26rpx;
						color:  #0874FA  !important ;
						text-align: center;
						line-height: 25rpx;
					}
				}
		}
		
		.sb{
			width: 690rpx;
			height: 333rpx;
			background:#ffffff;
			border-radius: 14rpx;
			margin:  29rpx auto;
			position: relative;
			.heads{
				width: 250rpx;
				height: 38rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 31rpx;
				color: #333333;
				line-height: 33rpx;
				position: absolute;
				top: 34rpx;
			    left:26rpx ;
			}
			.dead{
				width: 628rpx;
				height: 1rpx;
				border: 1px dashed #E5E5E5;
				position:  absolute;
				top: 94rpx;
				left: 31rpx;
			}
			.lcircle{
				width: 25rpx;
				height: 25rpx;
				background: #F3F5F7;
				border-radius: 50%;
				position: absolute;
				top: 82rpx;
				left: -10rpx;
				
			}
			.rcircle{
				width: 25rpx;
				height: 25rpx;
				background: #F3F5F7;
				border-radius: 50%;
				position: absolute;
				top: 82rpx;
				right:-10rpx;
			}
			.name{
				width: 200rpx;
				height: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				line-height: 26rpx;
				position: absolute;
				top: 134rpx;
				left: 26rpx;
				text{
					color: #333333;
				}
			}
			.neirpong{
				   width: 260rpx;
					height: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					line-height: 26rpx;
					position: absolute;
					top: 197rpx;
					left: 26rpx;
					text{
						color: #333333;
					}
				}
			.time{
				 width: 500rpx;
					height: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					line-height: 26rpx;
					position: absolute;
					top: 260rpx;
					left: 26rpx;
					text{
						color: #333333;
					}
				}
				.go{
					width: 196rpx;
					height: 73rpx;
					background: #0874FA;
					border-radius: 37rpx;
					text-align: center;
					line-height: 73rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 33rpx;
					color: #ffffff;
					position: absolute;
					bottom: 41rpx;
					right: 44rpx;
				}
				.finish{
					width: 104rpx;
					height: 46rpx;
					background: #cee3fe;
					border-radius: 7rpx;
					// opacity: 0.2;
					justify-content: center;
					display: flex;
					align-items: center;
					position: absolute;
					top: 125rpx;
					right:45rpx;
					text{
						display: inline-block;
						width: 100rpx;
						height: 25rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 26rpx;
						color:  #0874FA  !important ;
						text-align: center;
						line-height: 25rpx;
					}
				}
		}
</style>
